<template>
    <!--    <Header></Header>-->
    <div class="wrapper" @click="cancelActive" v-loading="loading">
        <div class="ep-title">
            <div>
                CONTACT US
            </div>
        </div>
        <div class="input-content">
            <div class="ex-header-brand-search">
                <div class="ex-header-brand-search-wrapper" @click="countryInput">
                    <input class="el-input" style="pointer-events: none;" type="text" v-model="form.country"
                           placeholder="COUNTRY"
                           @click="countryInput">
                    <div tabindex="0" id="country_select" class="ci_country_select" @click="selected">
                        <div data-value="977" data-name="Afghanistan">Afghanistan</div>
                        <div data-value="978" data-name="Albania">Albania</div>
                        <div data-value="979" data-name="Algeria">Algeria</div>
                        <div data-value="980" data-name="American Samoa">American Samoa</div>
                        <div data-value="981" data-name="Andorra">Andorra</div>
                        <div data-value="982" data-name="Angola">Angola</div>
                        <div data-value="983" data-name="Anguilla">Anguilla</div>
                        <div data-value="984" data-name="Antarctica">Antarctica</div>
                        <div data-value="985" data-name="Antigua and Barbuda">Antigua and Barbuda</div>
                        <div data-value="986" data-name="Argentina">Argentina</div>
                        <div data-value="987" data-name="Armenia">Armenia</div>
                        <div data-value="988" data-name="Aruba">Aruba</div>
                        <div data-value="989" data-name="Australia">Australia</div>
                        <div data-value="990" data-name="Austria">Austria</div>
                        <div data-value="991" data-name="Azerbaijan">Azerbaijan</div>
                        <div data-value="992" data-name="Bahamas">Bahamas</div>
                        <div data-value="993" data-name="Bahrain">Bahrain</div>
                        <div data-value="994" data-name="Bangladesh">Bangladesh</div>
                        <div data-value="995" data-name="Barbados">Barbados</div>
                        <div data-value="996" data-name="Belarus">Belarus</div>
                        <div data-value="997" data-name="Belgium">Belgium</div>
                        <div data-value="998" data-name="Belize">Belize</div>
                        <div data-value="999" data-name="Benin">Benin</div>
                        <div data-value="1000" data-name="Bermuda">Bermuda</div>
                        <div data-value="1001" data-name="Bhutan">Bhutan</div>
                        <div data-value="1002" data-name="Bolivia">Bolivia</div>
                        <div data-value="1003" data-name="Bonaire, Sint Eustatius and Saba">Bonaire, Sint Eustatius
                            and
                            Saba
                        </div>
                        <div data-value="1004" data-name="Bosnia and Herzegovina">Bosnia and Herzegovina</div>
                        <div data-value="1005" data-name="Botswana">Botswana</div>
                        <div data-value="1006" data-name="Bouvet Island">Bouvet Island</div>
                        <div data-value="1007" data-name="Brazil">Brazil</div>
                        <div data-value="1008" data-name="British Indian Ocean Territory">British Indian Ocean
                            Territory
                        </div>
                        <div data-value="1009" data-name="Brunei Darussalam">Brunei Darussalam</div>
                        <div data-value="1010" data-name="Bulgaria">Bulgaria</div>
                        <div data-value="1011" data-name="Burkina Faso">Burkina Faso</div>
                        <div data-value="1012" data-name="Burundi">Burundi</div>
                        <div data-value="1013" data-name="Cabo Verde">Cabo Verde</div>
                        <div data-value="1014" data-name="Cambodia">Cambodia</div>
                        <div data-value="1015" data-name="Cameroon">Cameroon</div>
                        <div data-value="1016" data-name="Canada">Canada</div>
                        <div data-value="1017" data-name="Cayman Islands">Cayman Islands</div>
                        <div data-value="1018" data-name="Central African Republic">Central African Republic</div>
                        <div data-value="1019" data-name="Chad">Chad</div>
                        <div data-value="1020" data-name="Chile">Chile</div>
                        <div data-value="1021" data-name="China">China</div>
                        <div data-value="1022" data-name="Christmas Island">Christmas Island</div>
                        <div data-value="1023" data-name="Cocos (Keeling) Islands">Cocos (Keeling) Islands</div>
                        <div data-value="1024" data-name="Colombia">Colombia</div>
                        <div data-value="1025" data-name="Comoros">Comoros</div>
                        <div data-value="1026" data-name="Congo">Congo</div>
                        <div data-value="1027" data-name="Congo, The Democratic Republic of the">Congo, The
                            Democratic
                            Republic of the
                        </div>
                        <div data-value="1028" data-name="Cook Islands">Cook Islands</div>
                        <div data-value="1029" data-name="Costa Rica">Costa Rica</div>
                        <div data-value="1030" data-name="Côte d'Ivoire">Côte d'Ivoire</div>
                        <div data-value="1031" data-name="Croatia">Croatia</div>
                        <div data-value="1032" data-name="Cuba">Cuba</div>
                        <div data-value="1033" data-name="Curaçao">Curaçao</div>
                        <div data-value="1034" data-name="Cyprus">Cyprus</div>
                        <div data-value="1035" data-name="Czechia">Czechia</div>
                        <div data-value="1036" data-name="Denmark">Denmark</div>
                        <div data-value="1037" data-name="Djibouti">Djibouti</div>
                        <div data-value="1038" data-name="Dominica">Dominica</div>
                        <div data-value="1039" data-name="Dominican Republic">Dominican Republic</div>
                        <div data-value="1040" data-name="Ecuador">Ecuador</div>
                        <div data-value="1041" data-name="Egypt">Egypt</div>
                        <div data-value="1042" data-name="El Salvador">El Salvador</div>
                        <div data-value="1043" data-name="Equatorial Guinea">Equatorial Guinea</div>
                        <div data-value="1044" data-name="Eritrea">Eritrea</div>
                        <div data-value="1045" data-name="Estonia">Estonia</div>
                        <div data-value="1046" data-name="Eswatini">Eswatini</div>
                        <div data-value="1047" data-name="Ethiopia">Ethiopia</div>
                        <div data-value="1048" data-name="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)
                        </div>
                        <div data-value="1049" data-name="Faroe Islands">Faroe Islands</div>
                        <div data-value="1050" data-name="Fiji">Fiji</div>
                        <div data-value="1051" data-name="Finland">Finland</div>
                        <div data-value="1052" data-name="France">France</div>
                        <div data-value="1053" data-name="French Guiana">French Guiana</div>
                        <div data-value="1054" data-name="French Polynesia">French Polynesia</div>
                        <div data-value="1055" data-name="French Southern Territories">French Southern Territories
                        </div>
                        <div data-value="1056" data-name="Gabon">Gabon</div>
                        <div data-value="1057" data-name="Gambia">Gambia</div>
                        <div data-value="1058" data-name="Georgia">Georgia</div>
                        <div data-value="1059" data-name="Germany">Germany</div>
                        <div data-value="1060" data-name="Ghana">Ghana</div>
                        <div data-value="1061" data-name="Gibraltar">Gibraltar</div>
                        <div data-value="1062" data-name="Greece">Greece</div>
                        <div data-value="1063" data-name="Greenland">Greenland</div>
                        <div data-value="1064" data-name="Grenada">Grenada</div>
                        <div data-value="1065" data-name="Guam">Guam</div>
                        <div data-value="1066" data-name="Guatemala">Guatemala</div>
                        <div data-value="1067" data-name="Guernsey">Guernsey</div>
                        <div data-value="1068" data-name="Guinea">Guinea</div>
                        <div data-value="1069" data-name="Guinea-Bissau">Guinea-Bissau</div>
                        <div data-value="1070" data-name="Guyana">Guyana</div>
                        <div data-value="1071" data-name="Haiti">Haiti</div>
                        <div data-value="1072" data-name="Heard Island and McDonald Islands">Heard Island and
                            McDonald
                            Islands
                        </div>
                        <div data-value="1073" data-name="Holy See (Vatican City State)">Holy See (Vatican City
                            State)
                        </div>
                        <div data-value="1074" data-name="Honduras">Honduras</div>
                        <div data-value="1075" data-name="Hong Kong">Hong Kong</div>
                        <div data-value="1076" data-name="Hungary">Hungary</div>
                        <div data-value="1077" data-name="Iceland">Iceland</div>
                        <div data-value="1078" data-name="India">India</div>
                        <div data-value="1079" data-name="Indonesia">Indonesia</div>
                        <div data-value="1080" data-name="Iran">Iran</div>
                        <div data-value="1081" data-name="Iraq">Iraq</div>
                        <div data-value="1082" data-name="Ireland">Ireland</div>
                        <div data-value="1083" data-name="Isle of Man">Isle of Man</div>
                        <div data-value="1084" data-name="Israel">Israel</div>
                        <div data-value="1085" data-name="Italy">Italy</div>
                        <div data-value="1086" data-name="Jamaica">Jamaica</div>
                        <div data-value="1087" data-name="Japan">Japan</div>
                        <div data-value="1088" data-name="Jersey">Jersey</div>
                        <div data-value="1089" data-name="Jordan">Jordan</div>
                        <div data-value="1090" data-name="Kazakhstan">Kazakhstan</div>
                        <div data-value="1091" data-name="Kenya">Kenya</div>
                        <div data-value="1092" data-name="Kiribati">Kiribati</div>
                        <div data-value="1093" data-name="Korea, Democratic People's Republic of">Korea, Democratic
                            People's Republic of
                        </div>
                        <div data-value="1094" data-name="Korea, Republic of">Korea, Republic of</div>
                        <div data-value="1095" data-name="Kuwait">Kuwait</div>
                        <div data-value="1096" data-name="Kyrgyzstan">Kyrgyzstan</div>
                        <div data-value="1097" data-name="Lao People's Democratic Republic">Lao People's Democratic
                            Republic
                        </div>
                        <div data-value="1098" data-name="Latvia">Latvia</div>
                        <div data-value="1099" data-name="Lebanon">Lebanon</div>
                        <div data-value="1100" data-name="Lesotho">Lesotho</div>
                        <div data-value="1101" data-name="Liberia">Liberia</div>
                        <div data-value="1102" data-name="Libya">Libya</div>
                        <div data-value="1103" data-name="Liechtenstein">Liechtenstein</div>
                        <div data-value="1104" data-name="Lithuania">Lithuania</div>
                        <div data-value="1105" data-name="Luxembourg">Luxembourg</div>
                        <div data-value="1106" data-name="Macao">Macao</div>
                        <div data-value="1107" data-name="Madagascar">Madagascar</div>
                        <div data-value="1108" data-name="Malawi">Malawi</div>
                        <div data-value="1109" data-name="Malaysia">Malaysia</div>
                        <div data-value="1110" data-name="Maldives">Maldives</div>
                        <div data-value="1111" data-name="Mali">Mali</div>
                        <div data-value="1112" data-name="Malta">Malta</div>
                        <div data-value="1113" data-name="Marshall Islands">Marshall Islands</div>
                        <div data-value="1114" data-name="Mauritania">Mauritania</div>
                        <div data-value="1115" data-name="Mauritius">Mauritius</div>
                        <div data-value="1116" data-name="Mexico">Mexico</div>
                        <div data-value="1117" data-name="Micronesia, Federated States of">Micronesia, Federated
                            States
                            of
                        </div>
                        <div data-value="1118" data-name="Moldova">Moldova</div>
                        <div data-value="1119" data-name="Monaco">Monaco</div>
                        <div data-value="1120" data-name="Mongolia">Mongolia</div>
                        <div data-value="1121" data-name="Montenegro">Montenegro</div>
                        <div data-value="1122" data-name="Montserrat">Montserrat</div>
                        <div data-value="1123" data-name="Morocco">Morocco</div>
                        <div data-value="1124" data-name="Mozambique">Mozambique</div>
                        <div data-value="1125" data-name="Myanmar">Myanmar</div>
                        <div data-value="1126" data-name="Namibia">Namibia</div>
                        <div data-value="1127" data-name="Nauru">Nauru</div>
                        <div data-value="1128" data-name="Nepal">Nepal</div>
                        <div data-value="1129" data-name="Netherlands">Netherlands</div>
                        <div data-value="1130" data-name="New Caledonia">New Caledonia</div>
                        <div data-value="1131" data-name="New Zealand">New Zealand</div>
                        <div data-value="1132" data-name="Nicaragua">Nicaragua</div>
                        <div data-value="1133" data-name="Niger">Niger</div>
                        <div data-value="1134" data-name="Nigeria">Nigeria</div>
                        <div data-value="1135" data-name="Niue">Niue</div>
                        <div data-value="1136" data-name="Norfolk Island">Norfolk Island</div>
                        <div data-value="1137" data-name="North Macedonia">North Macedonia</div>
                        <div data-value="1138" data-name="Northern Mariana Islands">Northern Mariana Islands</div>
                        <div data-value="1139" data-name="Norway">Norway</div>
                        <div data-value="1140" data-name="Oman">Oman</div>
                        <div data-value="1141" data-name="Pakistan">Pakistan</div>
                        <div data-value="1142" data-name="Palau">Palau</div>
                        <div data-value="1143" data-name="Palestine, State of">Palestine, State of</div>
                        <div data-value="1144" data-name="Panama">Panama</div>
                        <div data-value="1145" data-name="Papua New Guinea">Papua New Guinea</div>
                        <div data-value="1146" data-name="Paraguay">Paraguay</div>
                        <div data-value="1147" data-name="Peru">Peru</div>
                        <div data-value="1148" data-name="Philippines">Philippines</div>
                        <div data-value="1149" data-name="Pitcairn">Pitcairn</div>
                        <div data-value="1150" data-name="Poland">Poland</div>
                        <div data-value="1151" data-name="Portugal">Portugal</div>
                        <div data-value="1152" data-name="Puerto Rico">Puerto Rico</div>
                        <div data-value="1153" data-name="Qatar">Qatar</div>
                        <div data-value="1154" data-name="Romania">Romania</div>
                        <div data-value="1155" data-name="Russia">Russia</div>
                        <div data-value="1156" data-name="Rwanda">Rwanda</div>
                        <div data-value="1157" data-name="Saint Helena, Ascension and Tristan da Cunha">Saint
                            Helena,
                            Ascension and Tristan da Cunha
                        </div>
                        <div data-value="1158" data-name="Sain">Sain</div>
                        <div data-value="1159" data-name="Saint Kitts and Nevis">Saint Kitts and Nevis</div>
                        <div data-value="1160" data-name="Saint Lucia">Saint Lucia</div>
                        <div data-value="1161" data-name="Saint Martin (French part)">Saint Martin (French part)
                        </div>
                        <div data-value="1162" data-name="Saint Pierre and Miquelon">Saint Pierre and Miquelon</div>
                        <div data-value="1163" data-name="Saint Vincent and the Grenadines">Saint Vincent and the
                            Grenadines
                        </div>
                        <div data-value="1164" data-name="Samoa">Samoa</div>
                        <div data-value="1165" data-name="San Marino">San Marino</div>
                        <div data-value="1166" data-name="Sao Tome and Principe">Sao Tome and Principe</div>
                        <div data-value="1167" data-name="Saudi Arabia">Saudi Arabia</div>
                        <div data-value="1168" data-name="Senegal">Senegal</div>
                        <div data-value="1169" data-name="Serbia">Serbia</div>
                        <div data-value="1170" data-name="Seychelles">Seychelles</div>
                        <div data-value="1171" data-name="Sierra Leone">Sierra Leone</div>
                        <div data-value="1172" data-name="Singapore">Singapore</div>
                        <div data-value="1173" data-name="Sint Maarten (Dutch part)">Sint Maarten (Dutch part)</div>
                        <div data-value="1174" data-name="Slovakia">Slovakia</div>
                        <div data-value="1175" data-name="Slovenia">Slovenia</div>
                        <div data-value="1176" data-name="Solomon Islands">Solomon Islands</div>
                        <div data-value="1177" data-name="Somalia">Somalia</div>
                        <div data-value="1178" data-name="South Africa">South Africa</div>
                        <div data-value="1179" data-name="South Georgia and the South Sandwich Islands">South
                            Georgia
                            and the South Sandwich Islands
                        </div>
                        <div data-value="1180" data-name="South Sudan">South Sudan</div>
                        <div data-value="1181" data-name="Spain">Spain</div>
                        <div data-value="1182" data-name="Sri Lanka">Sri Lanka</div>
                        <div data-value="1183" data-name="Sudan">Sudan</div>
                        <div data-value="1184" data-name="Suriname">Suriname</div>
                        <div data-value="1185" data-name="Svalbard and Jan Mayen">Svalbard and Jan Mayen</div>
                        <div data-value="1186" data-name="Sweden">Sweden</div>
                        <div data-value="1187" data-name="Switzerland">Switzerland</div>
                        <div data-value="1188" data-name="Syria">Syria</div>
                        <div data-value="1189" data-name="Taiwan">Taiwan</div>
                        <div data-value="1190" data-name="Tajikistan">Tajikistan</div>
                        <div data-value="1191" data-name="Tanzania">Tanzania</div>
                        <div data-value="1192" data-name="Thailand">Thailand</div>
                        <div data-value="1193" data-name="Timor-Leste">Timor-Leste</div>
                        <div data-value="1194" data-name="Togo">Togo</div>
                        <div data-value="1195" data-name="Tokelau">Tokelau</div>
                        <div data-value="1196" data-name="Tonga">Tonga</div>
                        <div data-value="1197" data-name="Trinidad and Tobago">Trinidad and Tobago</div>
                        <div data-value="1198" data-name="Tunisia">Tunisia</div>
                        <div data-value="1199" data-name="Turkey">Turkey</div>
                        <div data-value="1200" data-name="Turkmenistan">Turkmenistan</div>
                        <div data-value="1201" data-name="Turks and Caicos Islands">Turks and Caicos Islands</div>
                        <div data-value="1202" data-name="Tuvalu">Tuvalu</div>
                        <div data-value="1203" data-name="Uganda">Uganda</div>
                        <div data-value="1204" data-name="Ukraine">Ukraine</div>
                        <div data-value="1205" data-name="United Arab Emirates">United Arab Emirates</div>
                        <div data-value="1206" data-name="United Kingdom">United Kingdom</div>
                        <div data-value="1207" data-name="United States">United States</div>
                        <div data-value="1208" data-name="United States Minor Outlying Islands">United States Minor
                            Outlying Islands
                        </div>
                        <div data-value="1209" data-name="Uruguay">Uruguay</div>
                        <div data-value="1210" data-name="Uzbekistan">Uzbekistan</div>
                        <div data-value="1211" data-name="Vanuatu">Vanuatu</div>
                        <div data-value="1212" data-name="Venezuela">Venezuela</div>
                        <div data-value="1213" data-name="Vietnam">Vietnam</div>
                        <div data-value="1214" data-name="Virgin Islands, British">Virgin Islands, British</div>
                        <div data-value="1215" data-name="Virgin Islands, U.S.">Virgin Islands, U.S.</div>
                        <div data-value="1216" data-name="Wallis and Futuna">Wallis and Futuna</div>
                        <div data-value="1217" data-name="Western Sahara">Western Sahara</div>
                        <div data-value="1218" data-name="Yemen">Yemen</div>
                        <div data-value="1219" data-name="Zambia">Zambia</div>
                        <div data-value="1220" data-name="Zimbabwe">Zimbabwe</div>
                    </div>
                </div>
                <!--        <div class="input-hint" v-show="countryReq">REQUIRED</div>-->
            </div>
            <div class="ex-header-brand-search">
                <div class="ex-header-brand-search-wrapper">
                    <input id="input_name" class="el-input" type="text" v-model="form.name" placeholder="NAME">
                </div>
                <div class="input-hint" v-show="nameReq">REQUIRED</div>
            </div>
            <div class="ex-header-brand-search">
                <div class="ex-header-brand-search-wrapper">
                    <input class="el-input" type="text" v-model="form.phone" placeholder="PHONE">
                </div>
                <div class="input-hint" v-show="phoneReq">REQUIRED</div>
            </div>
            <div class="ex-header-brand-search">
                <div class="ex-header-brand-search-wrapper">
                    <input class="el-input" type="text" v-model="form.email" placeholder="E-MAIL">
                </div>
                <div class="input-hint" v-show="emailReq">REQUIRED</div>
            </div>
        </div>
        <div class="input-leave">
            <textarea cols="30" rows="10" v-model="form.message" placeholder="LEAVE A MESSAGE"/>
            <div class="input-hint" v-show="messageReq">REQUIRED</div>
        </div>

        <div class="check-content">
            <div class="check-box" @click="clickCheck">
                <img v-show="check" src="/check.png">
            </div>
            <a href="/Privacy">PRIVACY AGREEMENT</a>
            <div class="input-hint" v-show="!check">REQUIRED</div>
        </div>

        <div class="submit" @click="save">
            <span>SUBMIT</span>
        </div>
    </div>
    <!--    <Footer></Footer>-->
</template>

<script setup lang="ts">

    useHead({
        title: 'EXEED Newsroom',//网站标题
        meta: [{name: 'description', content: 'Exeed Media Centor '}],
        link: [//网站link，可以在这里引入css和icon等
            {rel: 'shortcut icon', href: '/images/favicon.ico'},
            {rel: 'apple-touch-icon', href: '/images/favicon.ico'}
        ]
    })
    const config = useRuntimeConfig();
    const apiURL = config.public.apiURL;
    // const hostURL = config.public.hostURL;
    const router = useRouter();

    let searchText = ''

    const loading = ref(false);

    const form = ref({
        country: "",
        name: "",
        phone: "",
        email: "",
        message: ""
    })

    const check = ref(false);

    const countryReq = ref(false);
    const nameReq = ref(false);
    const phoneReq = ref(false);
    const emailReq = ref(false);
    const messageReq = ref(false);


    const clickCheck = () => {
        check.value = !check.value;
    }

    const save = () => {
        if (checkIsFill() && check) {
            loading.value = true;
            // 发送异步请求
            $fetch(`/api/contact/save`, {
                method: 'POST',
                body: form.value
            }).then(response => {
                loading.value = false;
                if (response.code == 200) {
                    alert("Submitted successfully!")
                }else {
                    alert("Submitted Failed!")
                }
                console.log(response)
            }).catch(error => {
                loading.value = false;
                alert("Submitted Failed!")
                console.error('Error fetching posts:', error);
            });
        }
    }

    const selected = (event) => {
        if (event.target) {
            form.value.country = event.target.getAttribute("data-name")
            let cs = document.getElementById("country_select");
            cs.blur();
            event.stopPropagation();
        }
    }


    const countryInput = () => {
        let cs = document.getElementById("country_select");
        cs.focus();
    }

    const checkIsFill = () => {

        if (form.value.country && form.value.country != "") {
            countryReq.value = false
        } else {
            countryReq.value = true;
        }

        if (form.value.name && form.value.name != "") {
            nameReq.value = false
        } else {
            nameReq.value = true;
        }

        if (form.value.phone && form.value.phone != "") {
            phoneReq.value = false
        } else {
            phoneReq.value = true;
        }

        if (form.value.email && form.value.email != "") {
            emailReq.value = false
        } else {
            emailReq.value = true;
        }

        if (form.value.message && form.value.message != "") {
            messageReq.value = false
        } else {
            messageReq.value = true;
        }


        if (!countryReq.value && !nameReq.value && !phoneReq.value
            && !emailReq.value && !messageReq.value) {

            return true;
        } else {
            return false;
        }
    }


</script>

<style scoped lang="scss">
    .wrapper {
        background-color: #FFFFFF;
        min-height: 1200px;
        width: 1380px;
        padding-left: 540px;
        padding-top: 90px;

        .ep-title {
            width: 1920px;
            text-align: center;

            div {
                width: 415px;
                text-align: center;
                font-size: 64px;
                // color: #30363A;
                margin-bottom: 24px;
                margin-top: 40px;
                background-image: -webkit-linear-gradient(180deg, #26B7BC 0%, #26B7BC 30%, #BB916C);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }

        .input-hint {
            margin-top: 5px;
            color: red;
            font-weight: 300;
            font-family: Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, Helvetica Neue, Arial, sans-serif;
        }

        .input-content {
            width: 1000px;
            margin-top: 60px;

            .ex-header-brand-search {
                margin-right: 30px;
                width: 400px;
                // transform: translateY(-50%);、
                display: inline-block;
                height: 100px;
                vertical-align: top;

                .ex-header-brand-search-wrapper {
                    padding-bottom: 8px;
                    width: 400px;
                    height: 40px;
                    border-bottom: 1px solid #000;
                    align-items: center;
                    /* 垂直居中所有子元素 */
                    justify-content: start;
                    cursor: pointer;

                }

                .el-input {
                    border: none;
                    line-height: 40px;
                    /* 移除边框 */
                    outline: none;
                    /* 在选中时移除轮廓线 */
                    background-color: transparent;
                    /* 设置背景色为透明 */
                    //caret-color: #ffffff;
                    /* 字体大小 */
                    font-size: 20px;
                    color: #000;
                    font-weight: 300;
                    font-family: Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, Helvetica Neue, Arial, sans-serif;
                }

                .ci_country_select {
                    position: relative;
                    top: 10px;
                    pointer-events: none;
                    height: 0px;
                    box-shadow: 0 0 2rem 0 rgb(0 0 0 / 10%);
                    background-color: #fff;
                    line-height: 50px;
                    width: 100%;
                    overflow-y: scroll;
                    z-index: 2;
                    transition: all .5s;
                    font-size: 30px;
                    color: #000;
                    font-weight: 300;
                    font-family: Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, Helvetica Neue, Arial, sans-serif;

                    div:hover {
                        background-color: rgb(238, 238, 238);
                        cursor: pointer;
                    }
                }

                .ci_country_select:focus {
                    height: 250px;
                    pointer-events: auto;
                    outline: none;
                }
            }
        }

        .input-leave {
            height: 350px;

            textarea {
                resize: none;
                width: 830px;
                height: 300px;
                line-height: 40px;
                /* 移除边框 */
                outline: none;
                /* 在选中时移除轮廓线 */
                background-color: transparent;
                /* 设置背景色为透明 */
                //caret-color: #ffffff;
                /* 字体大小 */
                font-size: 20px;
                color: #000;
                font-weight: 300;
                font-family: Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, Helvetica Neue, Arial, sans-serif;
            }

        }

        .check-content {
            height: 50px;

            .check-box {
                vertical-align: top;
                display: inline-block;
                user-select: none;
                width: 20px;
                height: 20px;
                border: 1px solid #000;
                cursor: pointer;

                img {
                    width: 20px;
                }
            }

            a {
                display: inline-block;
                width: 200px;
                font-weight: 300;
                margin-left: 10px;
                font-family: Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, Helvetica Neue, Arial, sans-serif;
            }
        }

        .submit {
            user-select: none;
            margin-top: 65px;
            width: 296px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background: rgb(199, 142, 102, 0.08);
            border-bottom: 4px solid #C78E66;
            color: #000000;
            cursor: pointer;
            transition: background-color .3s;
            font-size: 16px;
            font-weight: 300;
            font-family: Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, Helvetica Neue, Arial, sans-serif;
        }

        .submit:hover {
            background-color: rgb(199, 142, 102, 0.38);
        }

        :deep(.el-loading-spinner) {
            .path {
                stroke: #444;
            }
        }
    }
</style>
